<template>
  <div class="box">
   <!-- 左侧 -->
    <div class="left">
      <!-- 左上 -->
      <div class="left-top">
        <Titles title="环境监测"></Titles>
        <weather></weather>


      </div>

      <!-- 左下 -->
    <div class="left-bottom">
      
       <Titles title="学生分布情况"></Titles>
       <Student></Student>
    </div>
    </div>

       <div class="center">
          <Rotatehorse></Rotatehorse>
        <footernav class="footernav"></footernav>
       </div>

        <div class="right">
          <!-- 右上 -->
          <div class="right-top">

            <div class="heads">
              <div class="rotateTitle">水电用量</div>
            </div>
          
            <div class="alwasy"> 
              <div class="dian">
               
     <span class="iconfont icon-dianliang"></span>
                总用水量69035

              </div>
              <div class="shui">
            <span class="iconfont icon-shuidi"></span>
                总用电量72670
              </div>
            </div>
          
          <hydropower></hydropower>
          
          </div>

            <!-- 右下 -->
          <div class="right-bottom">

              <div class="heads">
              <div class="rotateTitle">校园人员流动情况</div>
            </div>

            <div class="bomhed"> 
              <div class="bomlt">
                <img src="../assets//images/yestoday.png" alt="">
                <div class="ltnei">
                  <p>1</p>
                  <p>昨日外来访客</p>
                </div>  
              </div>
               <div class="bomrt">
                  <img src="../assets//images/today.png" alt="">
                <div class="rtnei">
                  <p>1</p>
                  <p>今日外来访客</p>
                </div>  
              </div>
            </div>

              <campus></campus>
          </div>
        </div>
    
        <div class="top"></div>
  </div>
</template>

<script setup lang="ts">
import weather from '../components/Homes/Weather.vue'
import Titles from '../components/Title.vue'
import Student from '../components/Homes/student.vue'
import hydropower from '../components/Homes/hydropower.vue'
import campus from '../components/Homes/campus.vue'
import footernav from '../components/footernav.vue'
import Rotatehorse from '../components/Homes/Rotatehorse.vue'
</script>

<style scoped lang="scss">
.box{
  display: flex;

  position: relative;
  background-image: url('../assets//images/pageBg.png');
}


.left{
  width: 32%;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 / 100% 100vh;
}


/* 左上 */
.left-top{
  margin: 60px 60px 30px 50px;

  height: 40vh;
}


/* 左下*/
.left-bottom{
  margin: 0 60px 20px 50px;
 
  height: 45vh;
}


/* 中间 */
.center{
  width: 36%;
  height: 100vh;
  position: relative;
  .footernav{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
  }
}




.right{
  width: 32%;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 / 100% 100vh;
  box-sizing: border-box;
  padding: 80px 50px 0;
  color: #fff;
  font-size: 10px;
}



/* 右上 */
.right-top{
  margin: 0 15px 10px 10px;
  
  height: 40vh;

    .rotateTitle {
                transform: rotateY(-180deg);
                padding-left: 20px;
            }
}

.alwasy{
  width: 100%;
  height: 6vh;
  margin-top: 5px;
  display: flex;
  justify-content:space-around;

  .dian{
    
     height: 90%;
     border: 3px solid #548582;
     font-size: 16px;
     align-items: center;
     display: flex;
       .iconfont{
      color: #ff0101;
      font-size: 18px;
     }
  }

  .shui{
     height: 90%;
     border: 3px solid #548582;
     font-size: 16px;
     align-items: center;
     display: flex;
            .iconfont{
      color: #00deff;
      font-size: 18px;
     }
  }

}


/* 右下*/
.right-bottom{
  margin:35px 10px 30px 15px;
  
  height: 40vh;

  .rotateTitle {
                transform: rotateY(-180deg);
                padding-left: 20px;
            }
}
.bomhed{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.bomlt{
  display: flex;
  width: 35%;
  display: flex;
  justify-content: space-around;
  .ltnei{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.bomrt{
 display: flex;
  width: 35%;
  display: flex;
  justify-content: space-around;
    .rtnei{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}



/* 顶部 */
.top{
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 80px;
 background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;
 z-index: 1;
}

    .heads{
        width: 92%;
        height: 30px;
        background: url('../assets/images/titlebg.png') no-repeat 0 0 / 100% 100%;
        margin: 1px 18px;
        color: #e2e4bc;
        line-height: 30px;
        font-size: 14px;
         transform: rotateY(180deg);
    }
</style>